{% extends "base.html" %}

{% block content %}
    <h1 class="mb-4">{{ '编辑' if editing else '添加' }} 学习资料</h1>

    <form method="post" action="{% if editing %}/resources/{{ resource.id }}/edit{% else %}/resources{% endif %}" enctype="multipart/form-data">
        <div class="mb-3">
            <label class="form-label">类别</label>
            <input class="form-control" name="category" value="{{ resource.category if editing else '' }}" placeholder="例如：算法/Agent/基础知识">
        </div>
        
        <div class="mb-3">
            <label class="form-label">核心知识点</label>
            <input class="form-control" name="core_point" required value="{{ resource.core_point if editing else '' }}">
        </div>
        <div class="mb-3">
            <label class="form-label">资料类型</label>
            <input class="form-control" name="material_type" value="{{ resource.material_type if editing else '' }}">
        </div>

        <div class="mb-3">
            <label class="form-label">资料来源</label>
            <input class="form-control" name="source" value="{{ resource.source if editing else '' }}">
        </div>      
        <div class="mb-3">
            <label class="form-label">备注</label>
            <textarea class="form-control" name="note" rows="4">{{ resource.note if editing else '' }}</textarea>
        </div>

        <div class="mb-3">
            <label class="form-label">视频链接（可选）</label>
            <input class="form-control" name="video_link" value="{{ resource.video_link if editing else '' }}" placeholder="例如：https://youtu.be/... 或 其他视频链接">
        </div>

        <div class="mb-3">
            <label class="form-label">附件（可选，支持 pdf/ppt/jpg/png 等，最多 6 个，每个可填写备注）</label>
            {% set existing_count = attachments|length if attachments else 0 %}
            <div class="mb-2 text-muted">已上传：{{ existing_count }} / 6</div>
            <div id="upload-area" data-existing-count="{{ existing_count or 0 }}">
                <div class="row gx-2 upload-row">
                    <div class="col-12 col-md-6 mb-2">
                        <div class="input-group">
                            <input class="form-control" type="file" name="attachments" accept=".pdf,.ppt,.pptx,.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx">
                            <input class="form-control" type="text" name="attachment_remarks" placeholder="备注（可选）">
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-2">
                <button type="button" id="add-attachment" class="btn btn-sm btn-outline-primary">＋ 添加附件</button>
                <span class="text-muted ms-2">最多 6 个</span>
            </div>
        </div>

        {% if editing and attachments %}
            <div class="mb-3">
                <label class="form-label">已有附件（勾选以删除）</label>
                <div>
                    {% for a in attachments %}
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="delete_attachments" value="{{ a.saved_name }}" id="del_{{ loop.index }}">
                            <label class="form-check-label" for="del_{{ loop.index }}">
                                <a href="/uploads/{{ a.saved_name }}" target="_blank">{{ a.orig_name }}</a>
                                {% if a.remark %}
                                    <div class="text-muted small">备注：{{ a.remark }}</div>
                                {% endif %}
                            </label>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        <div class="d-flex justify-content-end gap-2">
            <!-- 取消 应返回上级资源列表（而非首页） -->
            <a class="btn btn-secondary" href="{{ request.headers.get('Referer','/resources') }}">取消</a>
            <button class="btn btn-primary" type="submit">保存</button>
        </div>
    </form>

{% endblock %}

<script>
    (function(){
        const maxCount = 6;
        const addBtn = document.getElementById('add-attachment');
        const uploadArea = document.getElementById('upload-area');
        const existingCount = parseInt(uploadArea.dataset.existingCount) || 0;

        function countRows(){
            return uploadArea.querySelectorAll('.upload-row').length + existingCount;
        }

        addBtn.addEventListener('click', function(){
            if(countRows() >= maxCount) return alert('最多只能添加 6 个附件');
            const row = document.createElement('div');
            row.className = 'row gx-2 upload-row';
            row.innerHTML = `\
                <div class="col-12 col-md-6 mb-2">\
                    <div class="input-group">\
                        <input class="form-control" type="file" name="attachments" accept=".pdf,.ppt,.pptx,.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx">\
                        <input class="form-control" type="text" name="attachment_remarks" placeholder="备注（可选）">\
                        <button type="button" class="btn btn-outline-danger btn-remove">删除</button>\
                    </div>\
                </div>`;
            uploadArea.appendChild(row);
            row.querySelector('.btn-remove').addEventListener('click', function(){ row.remove(); });
        });
    })();
</script>
